<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <center>
        <form action="">
            <input type="file" id="file" onChange="preview(this)" multiple/><br>
            <img src="" id="previewimg" width="100px" height="150px" /><br>
    </center>
    </form>
</body>

</html>
<script>
    //上传图片
    function preview(obj) {
        var file = document.getElementById('file').files[0]; //获取文件
        var img = document.getElementById("previewimg");
        img.src = window.URL.createObjectURL(obj.files[0]);
        UpladFile(file);
        console.log(file)

    }

    //上传文件方法
    function UpladFile(fileObj) {
        var form = new FormData(); // FormData 对象
        form.append("file", fileObj); // 通过append向form对象添加数据
        form.append("chunk", 0)
        xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
        xhr.open("post", "http://192.168.66.62:8889/api/upload/pushImg", true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
        xhr.send(form); //开始上传，发送form数据
        xhr.onreadystatechange = function () {
            var data = xhr.responseText;
            console.log(xhr);

        }
    }
</script>